<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>
        #ball {

            border-radius: 50%;

            position: absolute;

        }
    </style>

</head>

<body>

    <div id="ball"></div>

    <script>

        var ball = document.getElementById("ball");

        var a = { x: 100, y: 50, r: 25, w: 4, h: 5, g: 2, color: "red" }

        ball.style.left = a.x + "px";//初始位置

        ball.style.top = a.y + "px";

        ball.style.width = a.r * 2 + "px";//球的参数

        ball.style.height = a.r * 2 + "px";

        ball.style.background = a.color;//颜色

        var time = setInterval(function () {

            a.x += a.w; //移动距离

            a.y += a.h;

            a.h += a.g; //掉落加速

            ball.style.top = a.y + "px";

            ball.style.left = a.x + "px";

            if (a.y > 500) {//漂移+回弹

                a.h = -a.h * 0.8;

            }

        }, 50);

    </script>

</body>

</html>